/* eslint-disable max-len */
/* eslint-disable no-multiple-empty-lines */
/* eslint-disable prettier/prettier */

import { connect } from 'react-redux';
import React, { PureComponent } from 'react';
import { View, StyleSheet, Text, Image, Dimensions, TouchableOpacity } from "react-native";
import { Utils, TYFlatList, BrickButton, Dialog, Popup, TopBar } from "tuya-panel-kit";
import TYSdk from '../../api';
import dpCodes from '../../config/dpCodes';
import Strings from '../../i18n';
import style from '../../config/style';
import SwitchButton from "../../components/SwitchButton";
import Res from "../../res";





const { convertX: cx } = Utils.RatioUtils;
const { convertY: cy, viewWidth, viewHeight } = Utils.RatioUtils;

const TYEvent = TYSdk.event;
const TYDevice = TYSdk.device;
const TYNative = TYSdk.native;
const TYMobile = TYSdk.mobile;

const {
  filter_life_level: filter_life_levelCode,
  filter_left_time: filter_left_timeCode,
  filter_life_level1: filter_life_level1Code,
  filter_left_time1: filter_left_time1Code,
  reset_filter_life: reset_filter_lifeCode,
  reset_filter_life1: reset_filter_life1Code,

} = dpCodes;

class FilterMaterialView extends PureComponent {

  constructor(props) {
    super(props);

    const { filterType } = this.props;

    this.state = {
      title: filterType === 0 ? Strings.filter_wuli_title : Strings.filter_shenghua_title,//'物理滤材' : '生化滤材',
      showTop:true,
    };
  }

  lifePopupClicked = (v => {
    const { filter_life_level, filter_life_level1, filterType } = this.props;
    const life = filterType === 0 ? filter_life_level : filter_life_level1;

    let tempRange = [];
    let obj;
    for (let i = 0; i <= 100; i++) {
      obj = {
        label: i,
        value: i
      };
      tempRange.push(obj);
    }


    const title = '修改寿命';
    Popup.picker({
      dataSource: tempRange,
      title: title,
      cancelText: Strings.cancel,//"取消",
      confirmText: Strings.ok,//"确认",
      value: life,
      onMaskPress: ({ close }) => close(),
      onConfirm: (value, idx, { close }) => {
        if (filterType === 0){
          TYDevice.putDeviceData({
            filter_life_level: value
          });
        }else {
          TYDevice.putDeviceData({
            filter_life_level1: value
          });
        }
        close();
      }
    });
  });


  bottomView(){
    const { filterType } = this.props;
    return(
        <View style={{ backgroundColor: '#FFFFFF', height: 80, marginStart:30,marginTop:20, marginBottom: 30, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
          <BrickButton
              text={Strings.reset}
              textStyle={{fontSize: 15, color: '#000'}}
              wrapperStyle={{ width: (Dimensions.get('window').width-60), backgroundColor: '#e6e6e6' }}
              onPress={()=>{
                Dialog.confirm({
                  title: Strings.filter_reset_dialog_title,//'重置使用时间？',
                  subTitle: Strings.filter_reset_dialog_content,//'更换耗材并重置后，会重新开始计算剩余使用时间',
                  cancelText: Strings.cancel,//'取消',
                  confirmText: Strings.filter_recet_confirm_title,//'确认重置',
                  onConfirm: (data, { close }) => {
                    TYDevice.putDeviceData({
                      [filterType === 0 ? reset_filter_lifeCode : reset_filter_life1Code]: '01',
                    });
                    close();
                  },
                });
              }}
          />

          {/*<BrickButton*/}
          {/*    text="购买"*/}
          {/*    textStyle={{fontSize: 15}}*/}
          {/*    wrapperStyle={{ width: (Dimensions.get('window').width/2-30), backgroundColor: '#20AEE5' }}*/}
          {/*    onPress={()=>{*/}
          {/*      this.lifePopupClicked(0);*/}
          {/*    }}*/}
          {/*/>*/}
        </View>
    );
  }

  topView() {
    return (
      <TopBar.Container
        background="#FFFFFF"
        style={{ height: TopBar.height }}
        contentStyle={{ height: TopBar.height, marginTop: 10 }}
      >
        <TopBar.Action
          size={20}
          name="backIos"
          color="#4C4C4C"
          onPress={() => TYSdk.Navigator.pop()}
        />
        <TopBar.Content />
      </TopBar.Container>
    );
  }

  render() {
    // fliterType 0 物理滤材 1 生化滤材
    const { filter_life_level, filter_left_time, filter_life_level1, filter_left_time1, filterType } = this.props;
    const { title,showTop } = this.state;
    const avg = filterType === 0 ? Strings.formatValue('filter_days', 90):Strings.formatValue('filter_days', 180);//'90天' : '180天';
    console.log(filter_life_level, filter_left_time, filter_life_level1, filter_left_time1);

    const days = TYSdk.hoursToDays(filterType === 0 ? filter_left_time : filter_left_time1);
    const life = filterType === 0 ? filter_life_level : filter_life_level1;
    let time = '';
    let timeColor = '#21a7dc';

    if (life >= 6){
      //time = '剩余'+days+'天';
      time = Strings.formatValue('filter_life_level_not_expired', life, days)
      timeColor = '#21a7dc';
    }else if (life <= 5 && life > 0){
      // time = '剩余'+days+'天';
      time = Strings.formatValue('filter_life_level_not_expired', life, days)
      timeColor = '#f49329';
    }else {
      time = Strings.filter_life_level_expired;//'已过期，请及时更换';
      timeColor = '#ea3e32';
    }



    return (

      <View style={styles.container}>
        {showTop ? this.topView() : null}
        <View style={{ height: 80, backgroundColor: "#FFFFFF", flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}>
          <Text style={styles.title}>{title}</Text>
        </View>


        <View style={{ backgroundColor: '#FFFFFF', height: 800, flexDirection: 'column' }}>
          <Image style={{backgroundColor: '#ececec', marginLeft: 20, borderRadius: 20, flexDirection: 'row', justifyContent : 'center', alignContent : 'center', width:'100%', height:180}} source={filterType === 0 ? Res.filterWuli:Res.filterShenghua} />

          <TouchableOpacity
            style={styles.cell}
            disabled={true}// 禁用点击
            // onPress={() => {
            //   // 测试用，正式版删除
            //   // this.lifePopupClicked(0);
            // }}

          >
            <View style={styles.updown}>
              <Text style={styles.subtitle}>{title}</Text>
              <Text style={{ color: timeColor, marginTop: 5 }}>{time}</Text>
            </View>
          </TouchableOpacity>

          {/* 型号 */}
          <View style={styles.cell}>
            <Text style={styles.boldText}>{Strings.model}</Text>
            <Text style={styles.subtitle}>{title}</Text>
          </View>

          {/* 建议更换周期 */}
          <View style={styles.cell}>
            <Text style={styles.boldText}>{Strings.recommended_replacement_cycle}</Text>
            <Text style={styles.subtitle}>{avg}</Text>
          </View>

          {/* 更换教学 */}
          <TouchableOpacity
            style={styles.cell}
            onPress={() => {
              TYSdk.Navigator.push({
                id: 'help',
                helpValue: filterType === 0 ? 5:6,
              });
            }}
          >
            <Text style={styles.boldText}>{Strings.update_tutorial}</Text>
            <View style={styles.iconAndText}>
              <Text style={styles.subTitle}>{Strings.go_view}</Text>
              <Image style={[styles.arrow, {marginRight:-20}]} source={Res.enter} />
            </View>
          </TouchableOpacity>

          {/* 功能介绍 */}
          <View style={styles.updown}>
            <Text style={styles.boldText}>{Strings.feature_introduction}</Text>
            <Text style={[style.contentText, { marginStart: 0, marginTop: 5}] }>{filterType === 0 ? Strings.filter_feature_introduction_wuli : Strings.filter_feature_introduction_shenghua}</Text>
          </View>

          { this.bottomView() }
        </View>
      </View>
    );
  }

}



const styles = StyleSheet.create({
  container: {
    flex: 1,
    // marginLeft: 30,
    marginRight: 20,
    backgroundColor: '#f8f8f8',
  },
  list:{
    height:150,
    marginStart: 0,
  },
  cell: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: '#fff',
    height: 60,
    marginStart: 20,
    marginEnd: 20,
  },
  updown:{
    marginStart: 20,
    marginTop:10,
  },
  title:{
    marginStart: 30,
    fontSize: 30,
    color: '#333333',
    marginBottom: 20,
  },
  boldText:{
    fontSize: 17,
    fontWeight: 'bold',
    color: '#333333',
  },
  subTitle:{
    fontSize: 15,
    // fontWeight: 'bold',
    color: '#333333',
  },
  iconAndText: {
    flexDirection: 'row',
    alignItems: 'center',
  },


});

export default connect(({ dpState }) => ({
  dpState,
  filter_life_level: dpState[filter_life_levelCode],
  filter_left_time: dpState[filter_left_timeCode],
  filter_life_level1: dpState[filter_life_level1Code],
  filter_left_time1: dpState[filter_left_time1Code],
  reset_filter_life: dpState[reset_filter_lifeCode],
  reset_filter_life1: dpState[reset_filter_life1Code],
}))(FilterMaterialView);
